App.require(function () {
    var app = App.getCurrent();

    app.defineComponent("str-float-btn", {
        getDomObj: function () {
            this.attachDom("button", "button")
                .attachDom("span", "span")
                .attachEvent("button", "focus", this.focusHandler, false)
                .attachEvent("button", "blur", this.blurHandler, false)
                .attachEvent("button", "click", this.btnClickHandler, false);
        },
        changeSlotContent: function (str) {
            var slot = this.getSlotByName("default");
            slot.content = str;
            this.domList.span.innerHTML = str;
        },
        changeIcon: function (iconname, feeback) {
            if (this.property.icon === iconname) return;
            if (this.property.icon) {
                if (iconname) {
                    this.components[0].changeIcon(iconname, feeback)
                }
                else {
                    this.removeComponent(this.components[0]);
                    feeback(iconname);
                }
            }
            else {
                if (iconname) {
                    this.insertAdjacentHTML(this.domList.button, '<str-icon icon="' + iconname + '" width="18" height="18" nofocus></str-icon>', "afterbegin", function () {
                        feeback(iconname);
                    });
                }
                else {
                    feeback(iconname);
                }
            }
            this.property.icon = iconname;
        },
        focusHandler: function (ev) {
            this.dispatchCustomEvent("btnfocus", { component: this, target: ev.currentTarget });
        },
        blurHandler: function (ev) {
            this.dispatchCustomEvent("btnblur", { component: this, target: ev.currentTarget });
        },
        btnClickHandler: function (ev) {
            this.dispatchCustomEvent("btnclick", { component: this, target: ev.currentTarget });
        },
        render: function (next) {
            this.computeData();
            this.fetch("index.html", function (text) {
                return next(this.renderHTML(text));
            })
        },
        computeData: function () {
            var property = this.property;
            property.type = property.type || "regular";
            property.size = property.size || "normal";
            property.class = property.class || "ripple"
            property.disabled = typeof property.disabled === "undefined" ? "" : "disabled";
            property.icon = property.icon || "";
            if (property.type === "regular" && !property.icon) property.icon = "plus";
            this.data.propertystr = this.createPropertyStr();
        },
        get size() {
            return this.property.size;
        },
        set size(value) {
            if (value === this.property.size) return;
            this.domList.button.setAttribute("size", value);
            this.property.size = value;
        },
        set disabled(value) {
            if (this.property.disabled === value) return;
            if (value) {
                this.property.disabled = "disabled";
                this.domList.button.setAttribute("disabled", "disabled");
            }
            else {
                this.domList.button.removeAttribute("disabled");
                this.property.disabled = "";
            }
        },
        get disabled() {
            return this.property.disabled;
        },
        set type(value) {
            if (this.property.type === value) return;
            this.domList.button.setAttribute("type", value);
            if (value === "regular" && !this.property.icon) {
                this.property.icon = "plus";
                this.insertAdjacentHTML(this.domList.button, '<str-icon icon="plus" width="24" height="24" nofocus></str-icon>', "afterbegin");
            }
        },
        get type() {
            return this.property.type;
        },
        set icon(value) {
            if (this.property.icon === value) return;
            if (this.property.icon) {
                if (value) {
                    this.components[0].icon = value;
                }
                else {
                    if (this.property.type === "regular") {
                        this.components[0].icon = "plus";
                        this.property.icon = "plus";
                        return;
                    }
                    else {
                        this.removeComponent(this.components[0]);
                    }
                }
            }
            else {
                if (value) {
                    this.insertAdjacentHTML(this.domList.button, '<str-icon icon="' + value + '" width="24" height="24" nofocus></str-icon>', "afterbegin");
                }
            }
            this.property.icon = value;
        },
        get icon() {
            return this.property.icon;
        },
        get className() {
            return this.property.class;
        },
        set className(value) {
            if (this.property.class == value) return;
            this.domList.button.className = value;
            this.property.class = value;
        }
    });
});